<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>05_元素样式操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 元素样式/尺寸操作：直接操作元素样式下的属性和属性值
		     css()-------------------------功能：
			                                 1个参：传入css属性名
											  功能：获取匹配元素集合中第一个元素的css属性值
											 2个参：传入css属性名和属性值
											  功能：设置匹配元素集合中所有元素的css属性值
											 n个参：传入多个css属性名和属性值
											  语法糖：css({"属性名":"属性值",
											               "属性名":"属性值",
														   ......
														   "属性名":"属性值"
														   })
			 width()和height()-------------功能：匹配元素集合中第一个元素的宽高度
			                                 无参：获取元素集合中第一个元素的宽高度
											 有参：设置元素集合中第一个元素的宽高度
											   width(数值)
			 outerWidth()和outerHeight()---出现原因：元素存在盒子中，盒子模型，宽度计算方式：内外边距+边框+内容
			                                 无参：获取元素的宽高度，计算盒子模型：内边距+边框
											 有参：传入bool值，true时，计算盒子模型：内外边距+边框
		 -->
		 <style>
			 .box{
				 background-color: #b3e7ff;
				 margin: 20px;
				 padding: 20px;
				 border: 5px solid #acd2ff;
			 }
			 .result{
				 margin-top: 10px;
				 font-weight: 700;
			 }
		 </style>
	</head>
	<body>
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorBtn">获取颜色属性值</button>
		<button id="setColorBtn">设置颜色效果</button>
		<button id="setBtn">设置多属性效果</button>
		<button id="gsBtn">获取/设置元素宽度</button>
		<button id="bpBtn">获取高度(内边距和边框)</button>
		<button id="bpmBtn">获取高度(内外边距和边框)</button>
		<!-- 2.结果提示功能区 -->
		<div class="result" id="result"></div>
		
		<script>
			/* 1.点击 */
			$("#getColorBtn").click(function(){
				var bgColor=$(".box").css("background-color");
				$("#result").text("背景颜色为："+bgColor);
			});
			
			$("#setColorBtn").click(function(){
				$(".box").css("background-color","darkorange");
				$("#result").text("改变后的背景颜色为：橙色");
			});
			
			$("#setBtn").click(function(){
				$(".box").css({"background-image":"url(../img/mhls.png)",
				               "background-size":"100% 100%",
				               "border":"5px solid #efffa6",
							   "width":"200px",
							   "height":"200px",
							   "border-radius":"50%",
							   "filter": "drop-shadow(0 0 5px #a2a2a2)"
							  });
			});
			
			$("#gsBtn").click(function(){
				var boxWidth=$(".box").width();
				$(".result").text("获取到的宽度是"+boxWidth);
			});
			
			$("#bpBtn").click(function(){
				var bp=$(".box").outerHeight();
				$(".result").text("获取到高度为："+bp);
			});
			
			$("#bpmBtn").click(function(){
				var bpm=$(".box").outerHeight(true);
				$(".result").text("获取到高度为："+bpm);
			});
		</script>
	</body>
</html>